<template>
	<view class="booking">
		<navBar />
		<!-- 返回 -->
		<Nav title="样品寄送" filtertitle="样品寄送查询" />
		<!-- <view class="titles">在线预约</view> -->
		 <!-- <text>当前滚动高度：{{ scrollTop }}px</text> -->
		<!-- 我的意向单 :style="NavHeight"-->
		<scroll-view class="mybook" scroll-y="true">
			<view class="bkitem" v-for="(item,index) in mailList" :key="index">
				<view class="bkrol">
					<text>业务编码：<text class="colorb names">{{ item.businessCode }}</text></text>
				</view>
				<view class="bkrol">
					<text class="colors">业务名称：<text class="colorb">{{ item.businessName }}</text></text>
				</view>
				<view class="bkrol">
					<text>客户编码：<text class="colorb names">{{ item.rasClientId }}</text></text>
				</view>
				<view class="bkrol">
					<text class="colors">客户名称：<text class="colorb">{{ item.rasClientName }}</text></text>
				</view>
				<view class="bkrol">
					<text>邮寄单号：<text class="colorb">{{ item.mailingNumber }}</text></text>
				</view>
				<view class="bkrol bkdjs">
					<text class="colors">邮寄人：<text class="colorb">{{ item.mailer }}</text></text>
					<text class="colors">联系电话：<text class="colorb">{{ item.contact }}</text></text>
				</view>
				<view class="bkrol">
					<text>备注：<text class="colorb">{{ item.remarks }}</text></text>
				</view>
			</view>
		</scroll-view>
		<view class="toolbar-height"></view>
		<view class="toolbars">
			<view class="button-grounp">
				<!-- 添加 -->
				<view class="button payment-button" @tap="onAddBooking()">
					<uni-icons type="mail-open" class="icons" color="#fff" size="15"></uni-icons>
					样品寄送
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup ref="bookingModal" type="dialog">
			<uni-popup-dialog  title="样品寄送" :before-close="true" type="info" @confirm="onConfirmScanModal" @close="onScanClose">
				<view class="form-wrap modal">
					<view class="form-item">
						<view>邮寄单号</view>
						<view class="form-control">
							<input v-model="mailingNumber" placeholder="请输入邮寄单号" style="flex: 1;margin-right: 10rpx;" />
							<uni-icons type="scan" color="#ddd" size="20" @click="onScanGoods"></uni-icons>
							<!-- <input placeholder="请输入邮寄单号" /> -->
						</view>
					</view>
					<view class="form-item">
						<view>邮寄人</view>
						<view>
							<input v-model="mailer" placeholder="请输入邮寄人" />
						</view>
					</view>
					<view class="form-item">
						<view>联系方式</view>
						<view>
							<input v-model="contact" placeholder="请输入联系方式" />
						</view>
					</view>
					<view class="form-item">
						<view>备注</view>
						<view>
							<input v-model="remarks" placeholder="请输入备注" />
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	// 引入api
	import { 
		getProgramAddSampleShipping, // 寄送操作
		getProgramQuerySampleShipping, // 寄送单查询
	} from "@/proxy/program/program.api.js";
	export default {
		data(){
			return{
				remarks:"", // 备注
				contact:"", // 联系方式
				mailer:"", // 联系人
				mailingNumber:"", // 邮寄单号
				mailList:[] ,// 寄送列表
			}
		},
		async mounted() {
			await this.getProgramQuerySampleShippingData(); // 获取邮寄单
		},
		methods:{
			// 确定样品寄送
			async onConfirmScanModal(){
				var that = this;
				const { businessCode,businessName,customerCode } = uni.getStorageSync("userInfo");
				// 发送请求
				try {
				  const result = await getProgramAddSampleShipping([{
					 businessCode:businessCode,
					 businessName:businessName,
					 rasclientId:customerCode,
					 remarks:that.remarks, // 备注
					 contact:that.contact, // 联系方式
					 mailer:that.mailer, // 联系人
					 mailingNumber:that.mailingNumber, // 邮寄单号
				  }]);
				  if (result.code == 200) {
				    // console.log("样品寄送成功！！！",result);
					that.$refs.bookingModal.close();
					this.$toast({
					  title: "寄送成功",
					  icon: "success",
					  success:() => {
						  var nav = setTimeout(()=>{
							that.getProgramQuerySampleShippingData();
						  	clearTimeout(nav)
						  },500)
					  }
					});
					
					
				  } else {
				    return this.$toast({
				      title: result.data.msg,
				    });
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  return this.$toast({
				    title: "请求失败",
				    icon: "error",
				  });
				}
			},
			// 寄送单查询
			async getProgramQuerySampleShippingData(){
				const { customerCode } = uni.getStorageSync("userInfo");
				if(!customerCode){
					return this.$toast({
					  title: "请前往小程序授权登录",
					  // icon: "error",
					});
				}
				// 发送请求
				try {
				  const result = await getProgramQuerySampleShipping([{
					 rasclientId: customerCode,
				  }]);
				  if (result.code == 200) {
					  this.mailList = result.data;
				      // console.log("寄送单查询成功！！！",result);
				  } else {
				    this.$toast({
				      title: result.data.msg,
				    });
				    return false;
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  this.$toast({
				    title: "请求失败",
				    icon: "error",
				  });
				  return false;
				}
			},
			// 添加
			onAddBooking(){
				this.$refs.bookingModal.open();
			},
			onScanClose(){
				this.$refs.bookingModal.close();
			},
			onScanGoods(){
				// console.log("扫码识别单号")
				// 获取全局this
				var that = this;
				// 开启扫码
				uni.scanCode({
				  autoZoom: false, //不自动放大
				  onlyFromCamera: true,
				  scanType: ["barCode","qrCode"], // 只扫描二维码
				  success: async function (res) {
				    // console.log("识别码",res)
					that.mailingNumber = res.result;
				  }
				});
			}
		}
	}
</script>

<style lang="scss">
	// page{
	// 	background-color: rgb(249,250,251);
	// 	// height: 100vh;
	// }
	/* app端 */
	/* #ifdef APP-PLUS || H5 */
	#app,
	/* #endif */
	page {
	  background-color: #F9FAFB;
	  height: 100%;
	}
	.disw{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.booking{
		display: flex;
		flex-direction: column;
		height: 100vh;
		// background-color: rgb(249,250,251);
		.mybook{
			// margin: 20rpx;
			flex: 1;
			width: auto;
			overflow-y: auto;
			.bkitem{
				padding: 0 20rpx 20rpx;
				font-size: 25rpx;
				margin: 20rpx;
				background-color: #fff;
				// box-shadow: #bbb 0 0 8rpx;
			    border-radius: 15rpx;
				box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);
				// border-bottom: 1rpx solid #f4f4f4;
				.bkdjs{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.controls{
						color: #0081ff;
						.rolsl{
							margin-right: 10rpx;
						}
					}
				}
				.pd10{
					padding: 10rpx 0;
				}
				.bkrol{
					padding: 10rpx 0;
					.sheetc{
						font-size: 30rpx;
						font-weight: bold;
					}
				}
				.remark{
					margin: 10rpx 0rpx;
				}
			}
		}
	}
	.colors{
		color: #6C7381;
	}
	.colorb{
		color: #000;
	}
	.names{
		font-size: 28rpx;
		font-weight: bold;
	}
	.status{
		color: #FFF;
		background: #FF0000;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}
	.uni-collapse-item__title-wrap > .uni-collapse-item__title-box{
		height: unset !important;
		min-height: 60rpx !important;
		line-height: 60rpx !important;
		padding: 0rpx !important;
	}
	.uni-collapse-item__title-text{
		font-size: 25rpx !important;
	}
	
	.form-wrap {
		background: #fff;
		border-radius: 30rpx;
		padding: 20rpx 45rpx;
		box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
	
		&.modal {
			box-shadow: none;
			padding: 0;
			flex: 1;
			.form-control{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		
		.form-item {
			display: block;
			font-size: 28rpx;
			border-bottom: 1px solid #f2f2f2;
			padding: 12rpx 0;
			&:first-child {
				border-bottom: 1px solid #f2f2f2 !important;
			}
			&:last-child {
				border-bottom: 0;
			}
		}
	}
	
	// 吸底工具栏
	.toolbars {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--window-bottom);
		z-index: 1;
		height: 100rpx;
		display: flex;
		padding: 0 15rpx;
		align-items: center;
		border-top: 1rpx solid #ededed;
		border-bottom: 1rpx solid #ededed;
		background-color: #fff;
		box-sizing: content-box;
	
		.button-grounp {
			margin-left: auto;
			display: flex;
			justify-content: space-between;
			text-align: center;
			line-height: 72rpx;
			font-size: 13px;
			color: #fff;
	
			.button {
				width: 200rpx;
				margin: 0 10rpx;
				border-radius: 72rpx;
			}
	
			.payment-button {
				// background-color: #6887e1;
				background-color: #007AFF;
				.icons{
					// border: 1rpx solid #fff;
					// border-radius: 50%;
					// padding: 7rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	// 底部占位空盒子
	.toolbar-height {
		height: 100rpx;
	}
	// .uni-scroll-view, .uni-scroll-view-content{
	// 	overflow: unset !important; 
	// }
</style>